<template>
  <a-card>
    <div class="title">基本设置</div>
    <div class="baseView">
        <div class="left">
            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="昵称">
                    <a-input v-model="form.nickName" placeholder="请输入昵称" />
                </a-form-model-item>
                <a-form-model-item label="密码">
                    <a-input type="password" v-model="form.password" placeholder="请输入昵称"  />
                </a-form-model-item>
                <a-form-model-item label="邮箱">
                    <a-input v-model="form.email" placeholder="请输入昵称"  />
                </a-form-model-item>
                <a-form-model-item label="手机号">
                    <a-input v-model="form.phoneNumber" placeholder="请输入昵称"  />
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" :loading="loading"  @click="onSubmit">提交</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="right">
            <div class="avatar_title">头像</div>
            <div class="avatar">
                <img :src="form.avatar" alt="avatar"/>
            </div>
            <a-upload
                name="file"
                :headers="headers" 
                :before-upload="beforeUpload"
                :show-upload-list="false"
                action="/sys/common/upload"
                @change="handleChange($event)">
                <a-button><a-icon type="upload" />更换头像</a-button>
            </a-upload>
        </div>
    </div>
  </a-card>
</template>
<script>
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        loading:false,
        form:{},
        headers: {
        "Authorization": getToken()
      },

    };
  },
  created(){
    this.initData();
  },
  methods:{
    initData(){
        var vm = this;
        this.$store.dispatch("user/getInfo").then((data) => {
            vm.form = data;
        });
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("您只能上传图片文件!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("图像必须小于2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    handleChange({ file }) {
      if (file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (file.status === "done") {
        this.form.avatar = file.response.url;
        this.loading = false;
      }
    },
    onSubmit(){
        this.$store
            .dispatch(`user/updateUser`, this.form)
            .then((res) => {
                this.$message.success("保存成功！");
                this.initData();
            });
    }
  }
};
</script>
<style lang="less" scoped>
.ant-card {
  min-height: calc(100vh - 64px);
  margin: 24px 24px 0;
}

.title{
    margin-bottom: 12px;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
}

.baseView{
    display: flex;
    padding-top: 12px;
}

.baseView .left {
    flex: 1;
    // min-width: 224px;
    // max-width: 448px;
}

.baseView .right {
    flex: 1;
    padding-left: 104px;
}

.baseView .right .avatar_title {
    height: 22px;
    margin-bottom: 8px;
    color: rgba(0,0,0,.85);
    font-size: 14px;
    line-height: 22px;
}

.baseView .right .avatar {
    width: 144px;
    height: 144px;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid #bfbfbf;
}

.baseView .right .avatar img {
    width: 100%;
}
</style>